<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图标</title>
<link href="<%=request.getContextPath()%>/css/Default.css"
	rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/css/ui.jqgrid.css"
	rel="stylesheet" type="text/css"></link>
<link
	href="<%=request.getContextPath()%>/css/redmond/jquery-ui-1.8.14.custom.css"
	rel="stylesheet" type="text/css"></link>
<link href="<%=request.getContextPath()%>/css/Dialog.css"
	rel="stylesheet" type="text/css"></link>
<script src="<%=request.getContextPath()%>/scripts/jquery-1.5.1.min.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/scripts/HRM.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/scripts/jqgrid/i18n/grid.locale-cn.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/scripts/jqgrid/jquery.jqGrid.src.js"
	type="text/javascript"></script>
<script
	src="<%=request.getContextPath()%>/scripts/jquery-ui-1.8.14.min.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/scripts/jquery.form.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/scripts/Dialog.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/scripts/DataGrid.js"
	type="text/javascript"></script>
<script>
$().ready(function() {//加载用户列表
	init();
		$(".parentTrImg").die('click').live('click',function(){
			var trObj=$(this).parent().parent();
			var oldSrc=$(this).attr('src');
			var newSrc="";
			var id=$(this).attr('id');
			var parentId=$(this).attr('id').replace('iconImg_','');
			if($(this).attr('status')=='open'){
				$(this).attr('status','close');
				newSrc=oldSrc.replace("butExpand","butCollapse");
				trObj.nextAll(".childTr").each(function(index,obj){
					var parentId=$(this).attr('parentImg');
					if(parentId==id){
						$(this).remove();
					}
				});
			}else{
				$(this).attr('status','open');
				newSrc=oldSrc.replace("butCollapse","butExpand");
				var path="<%=request.getContextPath()%>/icon.do?method=getIconsByParentId&id="+parentId;
				$.getJSON(path,function(data,status,xhr){
					var childTrHtml="";
					data=data[0];
					for(var j=0;j<data.length;j++){
						if(j%2!=0){
							childTrHtml+="<tr rowno='"+j+"' style='background-color:#F9FBFC' class='childTr' parentImg='iconImg_"+parentId+"'>";
						}else{
							childTrHtml+="<tr rowno='"+j+"' style='background-color:#FFFFFF' class='childTr' parentImg='iconImg_"+parentId+"'>";
						}
						childTrHtml+="<td>"+j+"</td>";
						childTrHtml+="<td><input type='checkbox' value='"+data[j]['id']+"' class='childTrCheckbox' /></td>";
						childTrHtml+="<td><q style='padding: 0 10px'></q>";
						childTrHtml+="<img	src='<%=request.getContextPath()%>/images/butNoChild.gif'>&nbsp;";
						childTrHtml+="<img	 width='20' height='20' align='absmiddle' src='<%=request.getContextPath()%>/"+data[j]['path']+"'>&nbsp;";
						childTrHtml+=data[j]['title']+"</td>";//图标名称
						childTrHtml+="<td>"+data[j]['path']+"</td>";//图标路径
						childTrHtml += "</tr>";
					}
					trObj.after($(childTrHtml));
					bindClick();
				});
			}
			$(this).attr('src',newSrc);
		});
		$(".parentTrCheckbox").die('click').live('click',function(){
			var trImageId=$(this).prev().attr('id');
			if($(this).attr('checked')){//该状态为点击后的checkbox选中状态
				$(".childTr").each(function(index,obj){
					if($(this).attr('parentimg')==trImageId){
						$(this).find(".childTrCheckbox").attr('checked','true');
					}
				});
			}else{
				$(".childTr").each(function(index,obj){
					if($(this).attr('parentimg')==trImageId){
						$(this).find(".childTrCheckbox").removeAttr('checked');
					}
				});
			}
		});
		
	});
	$("#newIconBtn").die('click').live('click',function(){
		var params={
				  'title':'新增图标',
				  'url':$(this).attr('url'),
				  'width':550,
				  'height':410,
				  btnSucFunc:function(){
					  window.location.reload();
				  }
				 };
		createIframeDialog(params);
	});
	$('#editIconBtn').die('click').live('click',function(){
		var id=-1; 
		var isActionSelected=false;
		$(".childTrCheckbox").each(function(index,obj){
			if($(obj).attr('checked')){
				id=$(obj).val();
				isActionSelected=true;
			}
		});
		$(".parentTrCheckbox").each(function(index,obj){
			if($(obj).attr('checked')){
				id=$(obj).val();
			}
		});
		if(id<=0){
			createAlertDialog('提示信息','请选择一个图标进行编辑!');
			return false;
		}
		var params;
		if(isActionSelected){
			params={
				  'title':'编辑图标',
				  'url':$(this).attr('url')+'&id='+id,
				  'width':550,
				  'height':410,
				  btnSucFunc:function(){
					  window.location.reload();
				  }
				 };
		}else{
			params={
				  'title':'编辑图标',
				  'url':$(this).attr('url')+'&id='+id,
				  'width':550,
				  'height':410,
				  btnSucFunc:function(){
					  window.location.reload();
				  }
				 };
		}
		createIframeDialog(params);
	});
	$('#delIconBtn').die('click').live('click',function(){
		var id=-1; 
		var iconName="";
		var isIconSelected=false;
		var path="<%=request.getContextPath()%>/icon.do?method=";
		var msg="";
		$(".childTrCheckbox").each(function(index,obj){
			if($(obj).attr('checked')){
				id=$(obj).val();
				iconName=$(obj).parent().next().text().trim();
			}
		});
		$(".parentTrCheckbox").each(function(index,obj){
			if($(obj).attr('checked')){
				id=$(obj).val();
				iconName=$(obj).parent().next().text().trim();
				isIconSelected=true;
			}
		});
		if(isIconSelected){
			//createAlertDialog('提示信息','删除一级图标时会同时删除其所有子图标!');
			path+="deleteIconsByParentId&id=";
			msg='确认删除图标<span style="color:red;font-weight:bold;">'+iconName+'</span>及其子图标?';
		}else{
			msg='确认删除<span style="color:red;font-weight:bold;">'+iconName+'</span>图标?';
			path+="deleteIconById&id=";
		}
		if(id<=0){
			createAlertDialog('提示信息','请选择一个图标进行删除!');
			return false;
		}
		createConfirmDialog('确认删除图标?',msg,function(){
			$.ajax({
				type : "GET",
				url : path+id,
				dataType : "json",
				success : function(data) {
					if (data['status'] == 'ERROR') {
						createAlertDialog('提示信息','删除图标失败!');
					} else {
						createAlertDialog('提示信息','删除图标成功!',function(){
							window.location.reload();
						});
					}
				},
				error : function() {
					createAlertDialog('提示信息','网络繁忙,请稍后再试!');
				}
			});
		});
	});
	function init() {
		$("#iconData tr").not(".dataTableHead").remove();
		var path='<%=request.getContextPath()%>/icon.do?method=getIcons';
		$.getJSON(path,function(data,status,xhr){
			data=data[0];
			var lastActionNum=0;
			for(var i=0;i<data.length;i++){
				var iconTrHtml="";
				if((i+1+lastActionNum)%2!=0){
					iconTrHtml+="<tr rowno='"+(i+1+lastActionNum)+"' style='background-color:#F9FBFC'>";
				}else{
					iconTrHtml+="<tr rowno='"+(i+1+lastActionNum)+"' style='background-color:#FFFFFF'>";
				}
				iconTrHtml+="<td>"+(i+1+lastActionNum)+"</td>";
				iconTrHtml+="<td><input	class='parentTrCheckbox' type='checkbox' value='"+data[i]['id']+"'/></td>";
				iconTrHtml+="<td><img id='iconImg_"+data[i]['id']+"' class='parentTrImg' status='close' src='<%=request.getContextPath()%>/images/butCollapse.gif'/>&nbsp;";
				iconTrHtml+="<img align='absmiddle' width='20' height='20' src='<%=request.getContextPath()%>/"+data[i]['path']+"'>&nbsp;"+data[i]['title']+"</td>";
				iconTrHtml+="<td>"+data[i]['path']+"</td>";//图标路径
				iconTrHtml+="</tr>";
				for(var j=0;j<data[i]['icons'].length;j++){
					var childIconData=data[i]['icons'][j];
					var childTrHtml="";
					if((i+j+2+lastActionNum)%2!=0){
						childTrHtml+="<tr rowno='"+(i+j+2+lastActionNum)+"' style='background-color:#F9FBFC' class='childTr' parentImg='iconImg_"+data[i]['id']+"'>";
					}else{
						childTrHtml+="<tr rowno='"+(i+j+2+lastActionNum)+"' style='background-color:#FFFFFF' class='childTr' parentImg='iconImg_"+data[i]['id']+"'>";
					}
					childTrHtml+="<td>"+(i+j+2+lastActionNum)+"</td>";
					childTrHtml+="<td><input type='checkbox' value='"+childIconData['id']+"' class='childTrCheckbox' /></td>";
					childTrHtml+="<td><q style='padding: 0 10px'></q>";
					childTrHtml+="<img	src='<%=request.getContextPath()%>/images/butNoChild.gif'>&nbsp;";
					childTrHtml+="<img width='20' height='20' align='absmiddle' src='<%=request.getContextPath()%>/"+childIconData['path']+"'>&nbsp;";
					childTrHtml+=childIconData['title']+"</td>";//图标名称
					childTrHtml+="<td>"+childIconData['path']+"</td>";//图标路径
					childTrHtml += "</tr>";
					iconTrHtml += childTrHtml;
				}
								lastActionNum += data[i]['icons'].length;
								$(iconTrHtml).appendTo($("#iconData").find('tbody'));
								$(".dataTableHead").siblings().unbind('mouseover').bind('mouseover',function() {
									//lastColor=$(this).css("background-color");
									//$(this).css({"background-color":""}).addClass('jqgrowHover');
								});
								$(".dataTableHead").siblings().unbind('mouseout').bind('mouseout',function() {
									//$(this).removeClass('jqgrowHover').css({"background-color":lastColor});
								});
								bindClick();
							}
						});
	}
	function clickAllSelect(obj) {
		if ($(obj).attr('checked')) {
			$("#iconData :checkbox").attr('checked', 'true');
		} else {
			$("#iconData :checkbox").removeAttr('checked');
		}
	}
	function bindClick(){
		$(".dataTableHead").siblings().unbind('click').bind('click',function() {
			if (!$(this).attr('selected')) {
				$(this).find(".parentTrCheckbox").attr('checked',true);
				$(this).find(".childTrCheckbox").attr('checked',true);
				$(this).css({"background-color":"#D8F79D"}).attr('selected',true);
			} else {
				$(this).find(".parentTrCheckbox").removeAttr('checked');
				$(this).find(".childTrCheckbox").removeAttr('checked');
				if($(this).attr('rowno')%2==0){
					$(this).removeAttr('selected').css({"background-color":"#FFFFFF"});
				}else{
					$(this).removeAttr('selected').css({"background-color":"#F9FBFC"});
				}
			}
			$(this).siblings().not(".dataTableHead").each(function(index,obj){
				$(this).find(".parentTrCheckbox").removeAttr('checked');
				$(this).find(".childTrCheckbox").removeAttr('checked');
				if($(this).attr('rowno')%2==0){
					$(this).removeAttr('selected').css({"background-color":"#FFFFFF"});
				}else{
					$(this).removeAttr('selected').css({"background-color":"#F9FBFC"});
				}
				
			});
		});
	}
</script>
</head>
<body>
	<div class="dataGridTopDiv">
		<table
			style="width: 99%; border-collapse: separate; border-spacing: 6px; cellpadding: 0; cellspacing: 6; border: 0px solid #dddddd;">
			<tr valign="top">
				<td>
					<table width="100%" border="0" cellspacing="0" cellpadding="6"
						id="tableArea" class="blockTable">
						<tr>
							<td valign="middle" class="blockTd"><img
								src="<%=request.getContextPath()%>/images/icons/icon022a1.gif" />
								图标列表</td>
						</tr>
						<tr>
							<td style="padding: 0 8px 4px;"><a id="newIconBtn"
								href='javascript:void(0);' url="./IconAdd.jsp" class='zPushBtn'
								tabindex='-1'><img
									src="<%=request.getContextPath()%>/images/icons/icon022a2.gif" /><b>新建&nbsp;</b></a>
								<a id="editIconBtn"
								url="<%=request.getContextPath()%>/icon.do?method=updateIcon"
								href='javascript:void(0);' class='zPushBtn'><img
									src="<%=request.getContextPath()%>/images/icons/icon022a4.gif" /><b>编辑&nbsp;</b></a>
								<a href='javascript:void(0);' id="delIconBtn" class='zPushBtn'
								url="<%=request.getContextPath()%>/icon.do?method=deleteIcon"><img
									src="<%=request.getContextPath()%>/images/icons/icon022a3.gif" /><b>删除&nbsp;</b></a>
							</td>
						</tr>
						<tr>
							<td id="dataGridTd"
								style="padding-top: 0px; padding-left: 6px; padding-right: 6px; padding-bottom: 8px;">
								<table width="100%" cellspacing="0" cellpadding="2"
									id="iconData" class="dataTable">
									<tbody>
										<tr class="dataTableHead">
											<td width="3%"><img
												src="<%=request.getContextPath()%>/images/icons/icon_drag.gif"
												width="16" height="16"></td>
											<td width="2%"><input type='checkbox' id='selectAll' /></td>
											<td width="15%">图标名称</td>
											<td width="80%">图标路径</td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>
